<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	 <style type="text/css">
	 	*{
	 		margin: 0;
	 		padding: 0;
	 		font-family: arial;
	 		color: #424242;
	 	}
	 	
	 	a{
	 		text-decoration: none;
	 	}
	 	
	 	.nav{
	 		list-style: none;
	 	}
	 	/*清除浮动流三件套*/
	 	.nav::after{
	 		content: "";
	 		display: block;
	 		clear: both;
	 	}
	 	.nav .list-item{
	 		float: left;
	 		margin: 0 30px;
	 		height: 30px;
	 	 	line-height: 30px;
	 	}
	 	.nav .list-item a{
	 		color: #f40;
	 		padding: 0 5px;
	 		font-weight: bold;
	 		border-radius: 15px;
	 		display: inline-block;
	 	}
	 	.nav .list-item a:hover{
	 		background-color: #f40;
	 		color: #fff;
	 	}
	 </style>
	<body>
		
		<ul class="nav">
			<li class="list-item"><a href="">天猫</a></li>
			<li class="list-item"><a href="">聚划算</a></li>
			<li class="list-item"><a href="">天猫超市</a></li>
		</ul>

	</body>
</html>
